<!--
 多级表头配置
 @Author: mosowe
 @Date:2023-04-13 09:32:50
-->
<template>
  <view
    class="mosowe-th"
    :style="{
      '--border-right': border ? '1px solid #EBEEF5' : 'none'
    }"
  >
    <view
      class="main-title"
      :style="{
        textAlign: column.align || 'inherit'
      }"
    >
      <text class="text">{{ column.text }}</text>
    </view>
    <view class="next-title-wrap">
      <template v-for="item in column.children">
        <mosowe-th
          v-if="item.children && item.children.length"
          :column="item"
          :width="100 / column.children.length + '%'"
          :border="border"
        ></mosowe-th>
        <view
          v-else
          class="next-title"
          :style="{
            textAlign: item.align || 'inherit',
            flex: childWidth(item)
          }"
        >
          <text class="text">{{ item.text }}</text>
        </view>
      </template>
    </view>
  </view>
</template>

<script>
export default {
  name: 'mosowe-th',
  props: {
    column: {
      type: Object,
      default: () => ({})
    },
    border: {
      type: Boolean,
      default: false
    },
    width: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {};
  },
  methods: {
    componentWidth() {
      if (this.column?.width) {
        return this.column?.width?.endsWith('px') ? this.column.width : this.column.width + 'px';
      }
      return this.width;
    },
    childWidth(item) {
      if (item?.width) {
        return '0 0 ' + (item?.width?.endsWith('px') ? item.width : item.width + 'px');
      }
      return item?.width;
    }
  }
};
</script>

<style scoped lang="scss">
.mosowe-th {
  height: 100%;
  display: flex;
  flex: 0 0 50%;
  flex-direction: column;
  box-sizing: border-box;
  .main-title {
    width: 100%;
    padding: 12px 10px;
    box-sizing: border-box;
    line-height: 20px;
    border-bottom: 1px solid #ebeef5;
    border-right: var(--border-right);
  }
  .next-title-wrap {
    width: 100%;
    height: 100%;
    white-space: nowrap;
    display: flex;
    flex: 1;
    flex-direction: row;
    .next-title {
      flex: 1;
      display: inline-block;
      padding: 12px 10px;
      border-right: var(--border-right);
      box-sizing: border-box;
      line-height: 20px;
    }
  }
}
</style>
